<template>
  <div class="note">
    <div class="container">
      <div class="pictu">
        <el-row>
          <el-col :span="2">
            <div class="grid-content bg-purple"></div>
          </el-col>
          <el-col :span="13">
            <div class="grid-content bg-purple myImg1">
              <img :src="'/api/upload/' + noteList[0].noteImg1" alt class="la1 img-thumbnail" />
            </div>
          </el-col>
          <el-col :span="7">
            <div class="grid-content bg-purple-light">
              <div class="myImg2"><img :src="'/api/upload/' + noteList[0].noteImg2" alt class="la2 img-thumbnail" /></div>
              <div class="myImg3"><img :src="'/api/upload/' + noteList[0].noteImg3" alt class="la3 img-thumbnail" /></div>
            </div>
          </el-col>
          <el-col :span="2">
            <div class="grid-content bg-purple"></div>
          </el-col>
        </el-row>
      </div>
      <div class="content">
        <el-row>
          <el-col :span="15">
            <div class="grid-content bg-purple ji">
              <h3>{{noteList[0].noteTitle}}</h3>
              <p>{{noteList[0].noteStory}}</p>
            </div>
          </el-col>
          <el-col :span="9">
            <div class="grid-content bg-purple-light la">
              <img :src="'/api/upload/' + noteList[0].noteImg1" alt class="la4 img-thumbnail" />
            </div>
          </el-col>
        </el-row>
      </div>
      <div class="info">
        <el-row>
          <el-col :span="12">
            <div class="grid-content bg-purple">
              <img :src="'/api/upload/' + noteList[0].userImg" alt class="tou" />
              <span class="pName">{{noteList[0].userName}}</span>
              <button class="guanzhu" @click="guan" ref="guan">+关注</button>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content bg-purple-light">
              <div class="scol">
                <button class="collect" @click="cang" ref="cang">收藏</button>
                <span class="num">{{noteCollect[0].collectNum}}</span>
                <span class="sc">收藏</span>
              </div>
            </div>
          </el-col>
        </el-row>
        <p class="story">{{noteList[0].noteContent}}</p>
        <span class="time">{{formateDate(noteList[0].noteTime)}}</span>
      </div>
      <Discuss></Discuss>
    </div>
  </div>
</template>
<style lang="css" scoped>
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
.container {
  margin-top: 100px;
}
.pictu {
  background-image: url(../assets/notebei.jpg);
  background-repeat: no-repeat;
  background-size: 100% 100%;
  padding-top: 80px;
  padding-bottom: 80px;
}
.myImg1{
  height: 404px;
  overflow: hidden;
    display: inline-block;
}
.myImg2,.myImg3{
  height: 202px;
  overflow: hidden;
}
.pictu .la1 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.pictu .la2,
.pictu .la3 {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.img-thumbnail{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.content {
  margin-top: 20px;
}
.ji {
  padding-left: 10px;
}
h3 {
  font-size: 20px;
  color: #e6a23c;
  font-weight: 700;
  /* border-bottom: 5px solid #c22223; */
  font-size: 20px;
}
.content p {
  font-size: 14px;
  text-indent: 2em;
  line-height: 35px;
}
.content .la4 {
  width: 60%;
  margin-top: 30px;
  margin-bottom: 15px;
  height: 170px;
}
.la {
  text-align: center;
}
.info {
  margin-top: 10px;
}
.tou {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-left: 10px;
}
.guanzhu {
  margin-left: 50px;
  width: 80px;
  height: 35px;
  border-radius: 5px;
  margin-top: 10px;
  font-size: 14px;
}
.pName {
  margin-left: 15px;
}
.collect {
  width: 80px;
  height: 35px;
  border-radius: 5px;
  margin-top: 10px;
  margin-right: 20px;
  font-size: 14px;
}
.test {
  background-color: #fff;
  border: 1px solid #000;
  color: #000;
}
.active {
  background-color: #e6a23c;
  border: 1px solid #e6a23c;
  color: #fff;
}
.num {
  display: inline-block;
  color: #e6a23c;
  font-size: 700;
  margin-top: 15px;
}
.sc {
  display: inline-block;
  margin-right: 40px;
  margin-left: 5px;
  margin-top: 15px;
}
.scol {
  float: right;
}
.story {
  font-size: 14px;
  text-indent: 2em;
  margin-bottom: 5px;
  line-height: 25px;
}
.time,
.time1 {
  font-size: 13px;
  color: #ccc;
}
</style>
<script>
import "bootstrap/dist/css/bootstrap.min.css";
import "bootstrap/dist/js/bootstrap.min.js";
import Discuss from "../components/note/Discuss";
export default {
  data() {
    return {
      textarea1: "",
      queryId: -1,
      noteList: [],
      discusspingList: [],
      noteCollect: [],
      getUserInfo: [],
      addNoteCollect: [],
      noteColBtn: [],
      focusBtn: [],
      getnotefocus: [],
      getuserId: -1
    };
  },
  components: {
    Discuss
  },
  created() {
    this.queryId = this.$route.params.id;
    //获取笔记详情页信息
    this.$axios
      .get("/api/createNote/getNote2", {
        params: { noteId: this.queryId }
      })
      .then(res => {
        this.noteList = res.data.data;
        //获取用户信息
        this.$axios
          .get("/api/users/getUserInfo")
          .then(res => {
            this.getUserInfo = res.data.data;
            this.getuserId = this.getUserInfo[0].userId;
            console.log("getUserInfo", this.getUserInfo);
            if (this.getuserId != -1) {
              //获取笔记收藏按钮状态
              this.$axios
                .get("/api/createNote/noteColBtn", {
                  params: {
                    userId: this.noteList[0].userId,
                    selfId: this.getUserInfo[0].userId,
                    noteId: this.queryId
                  }
                })
                .then(res => {
                  console.log("noteColBtn:", res.data.data);
                  this.noteColBtn = res.data.data;
                  if (this.noteColBtn.length == 0) {
                    this.$refs.cang.innerHTML = "收藏";
                    this.$refs.cang.style.backgroundColor = "#fff";
                    this.$refs.cang.style.border = "1px solid #000";
                    this.$refs.cang.style.color = "#000";
                  } else {
                    this.$refs.cang.innerHTML = "取消收藏";
                    this.$refs.cang.style.backgroundColor = "#E6A23C";
                    this.$refs.cang.style.border = "1px solid #E6A23C";
                    this.$refs.cang.style.color = "#fff";
                  }
                })
                .catch(err => {
                  console.log("err:", err);
                });
              //获取笔记关注按钮状态
              this.$axios
                .get("/api/createNote/focusBtn", {
                  params: {
                    noteId: this.queryId,
                    selfId: this.getUserInfo[0].userId
                  }
                })
                .then(res => {
                  console.log("focusBtn:", res.data.data);
                  this.focusBtn = res.data.data;
                  if (
                    this.focusBtn.length != 0 &&
                    this.focusBtn[0].focusUserId == this.focusBtn[0].userId
                  ) {
                    this.$refs.guan.innerHTML = "取消关注";
                    this.$refs.guan.style.backgroundColor = "#E6A23C";
                    this.$refs.guan.style.border = "1px solid #E6A23C";
                    this.$refs.guan.style.color = "#fff";
                  } else {
                    this.$refs.guan.innerHTML = "+关注";
                    this.$refs.guan.style.backgroundColor = "#fff";
                    this.$refs.guan.style.border = "1px solid #000";
                    this.$refs.guan.style.color = "#000";
                  }
                })
                .catch(err => {
                  console.log("err:", err);
                });
            }
          })
          .catch(err => {
            console.log("err:", err);
          });
      })
      .catch(err => {
        console.log("err:", err);
      });

    //笔记收藏数查询
    this.$axios
      .get("/api/createNote/noteCollect", {
        params: { noteId: this.queryId }
      })
      .then(res => {
        // console.log("noteCollect:", res.data.data);
        this.noteCollect = res.data.data;
      })
      .catch(err => {
        console.log("err:", err);
      });
  },
  methods: {
    cang() {
      if (this.$refs.cang.innerHTML == "收藏") {
        this.$refs.cang.style.backgroundColor = "#E6A23C";
        this.$refs.cang.style.border = "1px solid #E6A23C";
        this.$refs.cang.style.color = "#fff";
        this.$refs.cang.innerHTML = "取消收藏";
        this.noteCollect[0].collectNum++;
        //添加笔记收藏表数据
        this.$axios
          .get("/api/createNote/addNoteCollect", {
            params: {
              userId: this.noteList[0].userId,
              selfId: this.getUserInfo[0].userId,
              noteId: this.queryId
            }
          })
          .then(res => {
            this.addNoteCollect = res.data.data;
            // console.log("addNoteCollect:", res.data.data);
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.$refs.cang.innerHTML == "取消收藏") {
        this.$refs.cang.style.backgroundColor = "#fff";
        this.$refs.cang.style.border = "1px solid #000";
        this.$refs.cang.style.color = "#000";
        this.$refs.cang.innerHTML = "收藏";
        this.noteCollect[0].collectNum--;
        //删除笔记收藏表数据
        this.$axios
          .get("/api/createNote/delNoteCollect", {
            params: {
              userId: this.noteList[0].userId,
              selfId: this.getUserInfo[0].userId,
              noteId: this.queryId
            }
          })
          .then(res => {
            this.addNoteCollect = res.data.data;
            // console.log("addNoteCollect:", res.data.data);
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
    },
    guan() {
      if (this.$refs.guan.innerHTML == "+关注") {
        this.$refs.guan.style.backgroundColor = "#E6A23C";
        this.$refs.guan.style.border = "1px solid #E6A23C";
        this.$refs.guan.style.color = "#fff";
        this.$refs.guan.innerHTML = "取消关注";
        //添加关注表数据
        this.$axios
          .get("/api/users/getfocus", {
            params: {
              userId: this.noteList[0].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getnotefocus = res.data.data;
          })
          .catch(err => {
            console.log("err:", err);
          });
      } else if (this.$refs.guan.innerHTML == "取消关注") {
        this.$refs.guan.style.backgroundColor = "#fff";
        this.$refs.guan.style.border = "1px solid #000";
        this.$refs.guan.style.color = "#000";
        this.$refs.guan.innerHTML = "+关注";
        //删除关注表数据
        this.$axios
          .get("/api/users/delfocus", {
            params: {
              userId: this.noteList[0].userId,
              selfId: this.getUserInfo[0].userId
            }
          })
          .then(res => {
            this.getnotefocus = res.data.data;
            // console.log("getnotefocus:", res.data.data);
          })
          .catch(err => {
            console.log("err:", err);
          });
      }
    },
    // 时间格式转换
    formateDate: function(datetime) {
      function addDateZero(num) {
        return num < 10 ? "0" + num : num;
      }
      let d = new Date(datetime);
      let formatdatetime =
        d.getFullYear() +
        "-" +
        addDateZero(d.getMonth() + 1) +
        "-" +
        addDateZero(d.getDate()) +
        " " +
        d.getHours() +
        ":" +
        d.getMinutes() +
        ":" +
        d.getSeconds();
      return formatdatetime;
    }
  }
};
</script>